<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas绘制时钟</title>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            /* background-color: #fff; */
            background-image: linear-gradient(45deg, rgb(87, 40, 255), rgb(255, 0, 170));
            padding: 0;
            margin: 0;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <canvas id="mycanvas" width="460" height="460"></canvas>
    <script>
        function drawScale(ctx) {
            /*画表盘圆圈*/
            ctx.beginPath();
            ctx.arc(0, 0, 225, 0, Math.PI * 2);
            ctx.lineWidth = 5;
            // var grd = ctx.createLinearGradient(-225, -225, 225, 225)
            // grd.addColorStop(0, `#D32F2F`);
            // grd.addColorStop(1, `#303F9F`);
            // ctx.fillStyle = grd;
            // ctx.fill();
            ctx.strokeStyle = `#303F9F`;
            ctx.stroke();
            ctx.closePath();


            // 绘制分秒的刻度
            ctx.beginPath();
            for (let i = 0; i < 60; i++) {
                ctx.rotate(Math.PI * 2 / 60);
                ctx.moveTo(0, -205);
                ctx.lineTo(0, -220);
                ctx.lineWidth = 3;
                ctx.strokeStyle = `#303F9F`;
                ctx.stroke();
            }
            ctx.closePath();

            // 绘制时刻
            ctx.beginPath();
            for (let i = 0; i < 12; i++) {
                ctx.rotate(Math.PI * 2 / 12);
                ctx.moveTo(0, -195);
                ctx.lineTo(0, -220);
                ctx.lineWidth = 5;
                ctx.strokeStyle = `#D32F2F`;
                ctx.stroke();
            }
            ctx.closePath();
        };


        function drawHands(ctx) {

            var d = new Date();
            var hour = d.getHours();
            var minute = d.getMinutes();
            var second = d.getSeconds();


            // 绘制秒针
            ctx.save();
            ctx.beginPath();
            ctx.rotate(Math.PI * 2 / 60 * second);
            ctx.moveTo(0, 40);
            ctx.lineTo(0, -150);
            ctx.lineWidth = 2;
            ctx.strokeStyle = `#D32F2F`;
            ctx.stroke();
            ctx.closePath();
            ctx.restore();

            // 绘制分针
            ctx.save();
            ctx.beginPath();
            ctx.rotate(Math.PI * 2 / 60 * minute + Math.PI * 2 / 60 * second / 60);
            ctx.moveTo(0, 30);
            ctx.lineTo(0, -110);
            ctx.lineWidth = 4;
            ctx.strokeStyle = `#C2185B`;
            ctx.stroke();
            ctx.closePath();
            ctx.restore();

            // 绘制时针
            ctx.save();
            ctx.beginPath();
            ctx.rotate(Math.PI * 2 / 12 * hour + (Math.PI * 2 / 60 * minute + Math.PI * 2 / 60 * second / 60) / 12);
            ctx.moveTo(0, 20);
            ctx.lineTo(0, -80);
            ctx.lineWidth = 6;
            ctx.strokeStyle = `#7B1FA2`;
            ctx.stroke();
            ctx.closePath();
            ctx.restore();

            // 绘制表心
            ctx.beginPath();
            ctx.arc(0, 0, 10, 0, Math.PI * 2);
            ctx.lineWidth = 2;
            ctx.fillStyle = `#888`;
            ctx.fill();
            ctx.strokeStyle = `#D32F2F`;
            ctx.stroke();
            ctx.closePath();

        };



        var mycanvas = document.getElementById('mycanvas');
        var ctx = mycanvas.getContext('2d');
        (function drawDial() {
            ctx.save();
            // 设置中心点
            ctx.clearRect(0, 0, 460, 460);
            ctx.translate(mycanvas.width / 2, mycanvas.height / 2);
            drawScale(ctx);
            drawHands(ctx);
            ctx.restore();
            requestAnimationFrame(drawDial);
        })();
    </script>
</body>

</html>